<template>
  <div>
    <el-tag
      v-for="(tag,index) in dynamicTags"
      :key="index"
      closable
      type="success"
      :disable-transitions="false"
      @click="editTag(tag,index)"
      @close="handleClose(tag)"
    >
      <span v-if="index!=num">{{ tag }}</span>
      <input
        v-if="index==num"
        ref="editInput"
        v-model="words"
        class="custom_input"
        type="text"
        @keyup.enter.native="handleInput(tag,index)"
        @blur="handleInput(tag,index)"
      >
    </el-tag>

    <el-input
      v-if="inputVisible"
      ref="saveTagInput"
      v-model="inputValue"
      class="input-new-tag"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button
      v-else
      class="button-new-tag"
      size="small"
      @click="showInput"
    >{{ theme }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'StarInputTag',
  model: {
    prop: 'tagList',
    event: 'input'
  },
  props: {
    tagList: {
      type: Array,
      default() {
        return []
      }
    },
    theme: {
      type: String,
      default: '+ 新标签'
    }
  },
  data() {
    return {
      inputVisible: false,
      inputValue: '',
      num: -1,
      words: ''
    }
  },
  computed: {
    dynamicTags: {
      get(val) {
        if (val) {
          return this.tagList
        } else {
          return ''
        }
      },
      set(tagList) {
        this.$emit('update:tagList', tagList)
      }
    }
  },
  methods: {
    // 数组去重
    unique(arr) {
      const x = new Set(arr)
      return [...x]
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.dynamicTags = this.unique(this.dynamicTags)
      this.inputVisible = false
      this.inputValue = ''
    },
    editTag(tag, index) {
      this.num = index
      this.$nextTick(_ => {
        this.$refs.editInput[0].focus()
      })
      this.words = tag
    },
    handleInput(tag, index) {
      const words = this.words
      if (words) {
        this.dynamicTags[index] = words
      }
      this.dynamicTags = this.unique(this.dynamicTags)
      this.words = ''
      this.num = -1
    }
  }
}
</script>
<style scoped lang="scss">
	.el-tag {
		margin-right: 5px;
	}
	.button-new-tag {
		margin-right: 5px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.input-new-tag {
		width: 90px;
		margin-right: 10px;
		vertical-align: bottom;
	}
	.custom_input {
		width: 80px;
		height: 16px;
		outline: none;
		border: transparent;
		background-color: transparent;
		font-size: 12px;
		color: #B59059;
	}
</style>
